<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '测练记录',
	},
}
</route>

<template>
	<view class="page-bookrack">
		<fly-navbar backgroundColor="#F6F6F6" leftText="测练记录" fixed />
		<view class="w-full box-border" :style="{ height: contentHeight + 'rpx' }">
			<scroll-view
				class="w-full h-full"
				scroll-y
				v-if="thisPage === 1 && examList.length"
				@scrolltolower="scrolltolower"
			>
				<view class="w-full px-4 py-4 box-border">
					<view
						class="bg-white rounded-[30rpx] px-4 py-4 box-border mb-4 last:mb-0"
						v-for="item in examList"
						:key="item.book_id"
						@tap="toDetails(item)"
					>
						<view class="flex-1 box-border flex justify-between">
							<view class="flex-1 flex flex-col pr-2 box-border">
								<text class="text-[33rpx] font-bold text-[#303030] line-clamp-1">{{
									item.book_name
								}}</text>
								<text class="text-[25rpx] text-[#303030] mt-2 line-clamp-1">{{
									item.paper_name
								}}</text>
								<view class="flex justify-start items-center mt-2">
									<image
										class="w-[33rpx] h-[33rpx] mr-[8rpx] last:mr-0"
										v-for="(cited, windex) in [1, 2, 3]"
										:key="cited"
										:src="
											item.star_number > windex
												? baseImg + '/book/book-star.png'
												: baseImg + '/book/book-star-gray.png'
										"
									></image>
								</view>
							</view>
							<image class="w-[136rpx] h-[136rpx] rounded-[30rpx]" :src="item.cover_img"></image>
						</view>
						<view class="w-full flex justify-between items-center mt-2">
							<text class="text-[#5E5E5E] text-[25rpx]">{{ item.add_time }}</text>
							<view
								v-if="item.is_finish === 0"
								class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] w-[136rpx] flex justify-center items-center"
								:style="{ background: '#48C855' }"
								>继续学习</view
							>
							<view
								v-if="item.is_finish === 1"
								class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] w-[136rpx] flex justify-center items-center"
								:style="{ background: '#C6C6C6' }"
								>完成学习</view
							>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="thisPage === 0 || (thisPage === 1 && !examList.length)"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				@click="retry"
			></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';

import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import { getExamRecordList } from '@/service/user';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const examList = ref([]);
const title = ref('');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);

onShow(() => {
	getList();
});

const toDetails = item => {
	if (!item.book_id) return;
	uni.navigateTo({
		url: `/pages-book/details/index?id=${item.book_id}${item.plan_id ? `&plan_id=${item.plan_id}` : ''}`,
	});
};

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getExamRecordList({
			page: page.value.number,
			page_size: page.value.size,
			student_id: userInfo.value.student_id,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			examList.value = page.value.number === 1 ? res.data : [...examList.value, ...res.data];
			if (res.data.length < page.value.size) {
				hasMore.value = false;
			}
			if (!examList.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}
</style>
